<template>
  <div style="padding:20px">
    <!-- 表单组件 -->
    <div class="question-filter">
      <el-form
        ref="form"
        :inline="true"
        label-position="right"
        label-width="100px"
        :model="query"
        :rules="rules"
        size="medium"
      >
        <el-row :gutter="15">
          <el-col :span="8">
            <el-form-item label="学科方向" prop="subject_id">
              <el-select
                v-model="query.subject_id"
                placeholder="请选择学科"
                clearable
              >
                <el-option
                  v-for="item in subjectList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="目录名称" prop="directory_id">
              <el-select
                v-model="query.directory_id"
                placeholder="请选择目录"
                clearable
              >
                <el-option
                  v-for="item in directoryList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="标签名称" required>
              <el-select
                v-model="tag_ids"
                multiple
                placeholder="请选择标签"
                clearable
              >
                <el-option
                  v-for="item in tagsList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="试题难度" prop="difficulty">
              <el-radio-group v-model="query.difficulty">
                <el-radio :label="1">简单</el-radio>
                <el-radio :label="2">中等</el-radio>
                <el-radio :label="3">较难</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="试题类型" prop="quest_type">
              <el-select
                v-model="query.quest_type"
                placeholder="选择题型"

                clearable
              >
                <el-option
                  label="单选题"
                  :value="1"
                />

                <el-option
                  label="多选题"
                  :value="2"
                />
                <el-option
                  label="判断题"
                  :value="3"
                />
                <el-option
                  label="简答题"
                  :value="4"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否真题" prop="is_true_question">
              <el-radio-group v-model="query.is_true_question">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <!-- 题干信息 -->
          <el-form-item label="题干信息" prop="question">
            <WangEditor
              v-model="query.question"
              :ref-name="'question'"
              style="width:1204px"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <!-- 题干信息 -->
          <el-form-item label="试题答案">

            <!-- 单选题 -->
            <el-table
              v-if="query.quest_type===1"
              border
              style="width:1203px"
              :data="quest_options1"
            >
              <el-table-column

                align="center"
                prop="code"
                label="单选项"
                width="100"
              >
                <template slot-scope="{row}">

                  <el-checkbox-group
                    v-model="quest_answer2"
                    :max="1"
                  >
                    <el-checkbox :label="row.code" />
                  </el-checkbox-group>
                </template>

              </el-table-column>
              <el-table-column

                align="center"
                prop="name"
                label="单选项内容"
                width="803"
              >
                <template slot-scope="{row}">
                  <el-input
                    v-model="row.content"
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                  />
                </template>

              </el-table-column>
              <el-table-column
                align="center"
                prop="address"
                label="选项图片"
                width="160"
              />
              <el-table-column
                align="center"
                prop="address"
                label="操作"
                width="140"
              >
                <template slot-scope="{row}">
                  <el-row v-if="quest_options1[quest_options1.length-1].code===row.code">
                    <el-button type="danger" icon="el-icon-delete" circle @click="del(row)" />
                    <el-button type="success" icon="el-icon-plus" circle @click="add" />
                  </el-row>
                </template>
              </el-table-column>
            </el-table>
            <!-- 单选题 -->
            <!-- 多选题 -->
            <el-table
              v-else-if="query.quest_type===2"
              border
              style="width:1203px"
              :data="quest_options3"
            >
              <el-table-column

                align="center"
                prop="code"
                label="多选项"
                width="100"
              >
                <template slot-scope="{row}">

                  <el-checkbox-group
                    v-model="quest_answer4"
                    :max="4"
                  >
                    <el-checkbox :label="row.code" />
                  </el-checkbox-group>
                </template>

              </el-table-column>
              <el-table-column

                align="center"
                prop="name"
                label="多选项内容"
                width="803"
              >
                <template slot-scope="{row}">
                  <el-input
                    v-model="row.content"
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                  />
                </template>

              </el-table-column>
              <el-table-column
                align="center"
                prop="address"
                label="选项图片"
                width="160"
              />
              <el-table-column
                align="center"
                prop="address"
                label="操作"
                width="140"
              >
                <template slot-scope="{row}">
                  <el-row v-if="quest_options3[quest_options3.length-1].code===row.code">
                    <el-button type="danger" icon="el-icon-delete" circle @click="del(row)" />
                    <el-button type="success" icon="el-icon-plus" circle @click="add" />
                  </el-row>
                </template>
              </el-table-column>
            </el-table>
            <!-- 多选题 -->
            <!-- 判断题 -->
            <el-table
              v-else-if="query.quest_type===3"
              border
              style="width:1203px"
              :data="quest_options2"
            >
              <el-table-column
                align="start"
                prop="code"
                label="判断"
                width="1203"
              >
                <template slot-scope="{row}">
                  <el-checkbox-group
                    v-model="quest_answer3"
                    :min="1"
                    :max="1"
                  >
                    <el-checkbox :label="row.code" />
                  </el-checkbox-group>
                </template>
              </el-table-column>
            </el-table>
            <!-- 判断题 -->
            <!-- 简答题 -->
            <WangEditor
              v-else-if="query.quest_type===4"
              v-model="quest_answer1"
              :ref-name="'quest'"
              style="width:950px"
            />
            <!-- 简答题 -->
            <el-row v-else>
              请选择试题类型，生成答案模板
            </el-row>
          </el-form-item>

        </el-row>
        <el-row>
          <!-- 题干信息 -->
          <el-form-item label="答案解析">
            <WangEditor
              v-model="query.quest_remark"
              :ref-name="'quest_remark'"
              style="width:1204px"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label=" ">
            <el-button size="big" type="primary" @click="addQuestion">提交</el-button>
            <el-button size="big">取消</el-button>
          </el-form-item>
        </el-row>

      </el-form>
    </div>

  </div>
</template>

<script>

import { getSubjectList, updateQuestion, addQuestion, getQuestionDetailApi } from '@/api/exam/question'
// import { mapGetters } from 'vuex'
export default {
  name: 'AddQuestion',
  data() {
    return {
      subjectList: {},
      directoryList: [],
      tagsList: [],
      query: { // 查询信息
        directory_id: '',
        subject_id: '',
        quest_type: '',
        tag_id: '',
        difficulty: 1,
        is_true_question: 1,
        question: '',
        quest_remark: '',
        quest_answer: [],
        quest_options: []
      },
      rules: {
        directory_id: [{ required: true, message: '请选择目录' }],
        subject_id: [{ required: true, message: '请选择学科' }],
        quest_type: [{ required: true, message: '请选择试题类型' }],
        tag_id: [{ required: true, message: '请选择标签信息' }],
        question: [{ required: true, message: '请输入题干内容' }],
        difficulty: [{ required: true, message: '必须' }],
        is_true_question: [{ required: true, message: '必须' }]
      },
      quest_answer3: [],
      quest_answer2: [],
      quest_answer4: [],
      quest_answer1: '',
      tag_ids: [],
      quest_options1: [{
        code: 'A',
        content: '',
        is_true: false,
        pic: ''
      },
      {
        code: 'B',
        content: '',
        is_true: false
      },
      {
        code: 'C',
        content: '',
        is_true: false
      },
      {
        code: 'D',
        content: '',
        is_true: false
      }
      ],
      quest_options3: [{
        code: 'A',
        content: '',
        is_true: false,
        pic: ''
      },
      {
        code: 'B',
        content: '',
        is_true: false
      },
      {
        code: 'C',
        content: '',
        is_true: false
      },
      {
        code: 'D',
        content: '',
        is_true: false
      }
      ],
      quest_options2: [{
        code: '正确',
        content: '',
        is_true: false
      },
      {
        code: '错误',
        content: '',
        is_true: false
      }]

    }
  },
  watch: {
    'query.subject_id': {
      deep: true,
      immediate: true,
      handler(newval) {
        console.log(newval)
        if (!newval) {
          this.directoryList = []
          return
        }
        const obj = this.subjectList.find(item => item.id === newval)
        this.directoryList = obj.children || []
      } },
    'query.directory_id': {
      deep: true,
      immediate: true,
      async handler(newval) {
        if (!newval) return (this.tagsList = [])
        // 取出二级
        const child = this.directoryList.find(val => val.id === this.query.directory_id) || {}
        this.tagsList = child.children || []
      },
      'query.quest_type': {
        deep: true,
        immediate: true,
        handler(newval) {
          if (newval === 4) {
            this.quest_answer = ''
            this.query.quest_options = []
          }
        }
      }
    }},
  created() {
    !this.subjectList.length && this.loadTreeList()
  },
  methods: {
    // 添加问题
    async addQuestion() {
      this.query.tag_id = this.tag_ids
      if (this.query.quest_type === 4) {
        this.query.quest_answer = this.quest_answer1
      } else if (this.query.quest_type === 2) {
        this.query.quest_options = this.quest_options3
        this.query.quest_answer = this.quest_answer2
      } else if (this.query.quest_type === 3) {
        this.query.quest_options = this.quest_options2
        this.query.quest_answer = this.quest_answer3
      } else if (this.query.quest_type === 1) {
        this.query.quest_options = this.quest_options1
        this.query.quest_answer = this.quest_answer2
      }
      if (this.query.quest_type !== 4) {
        this.query.quest_options.forEach(item => {
          return this.query.quest_answer.forEach(obj => {
            if (item.code === obj) item.is_true = true
          })
        })
      }

      this.query.quest_answer = this.query.quest_answer.toString()
      await this.$refs.form.validate()
      if (this.query.id) {
        await updateQuestion({ ...this.query })
        this.$message.success('修改成功')
      } else {
        await addQuestion({ ...this.query })
        this.$message.success('新增成功')
      }

      this.query = { // 查询信息
        directory_id: '',
        subject_id: '',
        quest_type: '',
        tag_id: '',
        difficulty: '',
        is_true_question: '',
        question: '',
        quest_remark: '',
        quest_answer: [],
        quest_options: []

      }
      this.$emit('updata')
      this.tagsList = []
      this.directoryList = []
    },
    del() {
      if (this.query.quest_type === 1) {
        if (this.quest_options1.length > 2) {
          this.quest_options1.splice(this.quest_options1.length - 1, 1)
        } else {
          this.$message.warning('选项至少两个')
        }
      } else if (this.query.quest_type === 2) {
        if (this.quest_options3.length > 2) {
          this.quest_options3.splice(this.quest_options3.length - 1, 1)
        } else {
          this.$message.warning('选项至少两个')
        }
      }
    },
    add() {
      if (this.query.quest_type === 1) {
        if (this.quest_options1.length === 4) {
          this.quest_options1.push({
            code: 'E',
            content: '',
            is_true: false
          })
        } else if (this.quest_options1.length === 5) {
          this.quest_options1.push({
            code: 'F',
            content: '',
            is_true: false
          })
        } else if (this.quest_options1.length === 3) {
          this.quest_options1.push({
            code: 'D',
            content: '',
            is_true: false
          })
        } else if (this.quest_options1.length === 2) {
          this.quest_options1.push({
            code: 'C',
            content: '',
            is_true: false
          })
        } else {
          this.$message.warning('选项不能超过六个')
        }
      } else
      if (this.quest_options3.length === 4) {
        this.quest_options3.push({
          code: 'E',
          content: '',
          is_true: false
        })
      } else if (this.quest_options3.length === 5) {
        this.quest_options3.push({
          code: 'F',
          content: '',
          is_true: false
        })
      } else if (this.quest_options3.length === 3) {
        this.quest_options3.push({
          code: 'D',
          content: '',
          is_true: false
        })
      } else if (this.quest_options3.length === 2) {
        this.quest_options3.push({
          code: 'C',
          content: '',
          is_true: false
        })
      } else {
        this.$message.warning('选项不能超过六个')
      }
    },
    async getQuestionDetail(id) {
      const res = await getQuestionDetailApi(id)
      this.query = res
      this.query.difficulty = res.difficulty ? res.difficulty : 1
      this.query.is_true_question = res.is_true_question ? res.is_true_question : 1
      this.tagsList = JSON.parse(res.tag_id)
    },
    /**
     * 获取树形数据
     */
    async loadTreeList() {
      const res = await getSubjectList()
      this.subjectList = res
      // this.query = res
    }
  }
}

</script>

<style scoped>

</style>
